<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
    </style>
</head>

<body>
    <canvas id="myCanvas" width="600" height="300" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Verdana";
        var gradient = ctx.createLinearGradient(0, 0, 400, 300);
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1", "red");
        //渐变填充
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 2;
        ctx.strokeText("Big smile!", 450, 50);
        ctx.fillStyle = gradient;
        ctx.lineWidth = 2;
        ctx.fillText("Big smile!", 450, 100);
        ctx.beginPath();
        ctx.moveTo(20, 150);
        ctx.lineTo(180, 150);
        ctx.moveTo(100, 125);
        ctx.lineTo(100, 200);
        ctx.lineTo(50, 280);
        ctx.moveTo(100, 200);
        ctx.lineTo(150, 280);

        ctx.moveTo(280, 120);
        ctx.lineTo(220, 180);
        ctx.moveTo(280, 140);
        ctx.lineTo(230, 190);

        ctx.moveTo(420, 120);
        ctx.lineTo(480, 180);
        ctx.moveTo(420, 140);
        ctx.lineTo(470, 190);

        ctx.moveTo(300, 220);
        ctx.lineTo(300, 280);
        ctx.lineTo(280, 280);
        ctx.lineTo(280, 290);
        ctx.lineTo(340, 290);
        ctx.lineTo(340, 220);

        ctx.moveTo(400, 220);
        ctx.lineTo(400, 280);
        ctx.lineTo(420, 280);
        ctx.lineTo(420, 290);
        ctx.lineTo(360, 290);
        ctx.lineTo(360, 220);
        ctx.strokeStyle = "red";
        ctx.strokeStyle = gradient;
        ctx.strokeRect(300, 20, 100, 80);
        ctx.strokeRect(340, 100, 20, 20);
        ctx.strokeRect(280, 120, 140, 100);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);//火头
        ctx.moveTo(230, 190);
        ctx.arc(220, 190, 10, 0, 2 * Math.PI);//机左手
        ctx.moveTo(490, 190);
        ctx.arc(480, 190, 10, 0, 2 * Math.PI);//机右手
        ctx.moveTo(330, 50);
        ctx.arc(320, 50, 10, 0, 2 * Math.PI);//机左眼
        ctx.moveTo(390, 50);
        ctx.arc(380, 50, 10, 0, 2 * Math.PI);//机右眼
        ctx.moveTo(360, 80);
        ctx.arc(350, 80, 10, 0, 1 * Math.PI);//机嘴
        ctx.stroke();
    </script>
    <p>图片应用:</p>
    <img src="img/1666269531332.jpg" id="lamp">
    <p>画布:</p>
    <button onclick="draw('repeat')">重复</button>
    <button onclick="draw('repeat-x')">重复-x</button>
    <button onclick="draw('repeat-y')">重复-y</button>
    <button onclick="draw('no-repeat')">不重复</button>
    <canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
        function draw(direction) {
            var c = document.getElementById("myCanvas2");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.width, c.height);
            var img = document.getElementById("lamp")
            var pat = ctx.createPattern(img, direction);
            ctx.rect(0, 0, 300, 300);
            ctx.fillStyle = pat;
            ctx.fill();
        }
    </script>
    <!-- <canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #ccc;">
        123123131321231322123
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
        my_gradient.addColorStop(0, "black");
        my_gradient.addColorStop(1, "white");
        ctx.fillStyle = my_gradient;
        ctx.fillRect(10, 80, 70, 50);
        ctx.strokeStyle = "blue"
        ctx.strokeRect(70, 10, 50, 50);
    </script> -->
</body>

</html>